// import {tipMessage} from '../static/js/modules/utils.mjs';

(function(){
	var addModelHTML = function(type = 'del'){
		return `
		<div class="input-group input-group-sm rb-model-item">
			<div class="input-group-prepend">
				<span class="input-group-text">型号</span>
			</div>
			<input class="form-control" placeholder="请输入型号" />
			<div class="input-group-append">
				${type === 'add' ? '<button class="btn btn-primary add-model-btn" type="button" title="添加新型号">+</button>' : '<button class="btn btn-outline-secondary del-model-btn" type="button" title="删除型号">-</button>'}
			</div>
		</div>`;
	}
  var settingHTML = `
		<div class="pdd-entry-btn" id="toolsModalToggle" data-target="#pddMainToolsModal">
			<span>PDD</span>
			<i class="iconfont icon-set"></i>
		</div>

		<!-- Modal -->
		<div class="tools-modal fade" id="pddMainToolsModal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="pddMainToolsModalLabel">PDD Tools</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>

					<div class="modal-body pdd-modal-tools-body scrollbar">
						<ul class="nav nav-tabs">
							<li class="nav-item">
								<a class="nav-link active" href="#goodspublish">商品发布</a>
							</li>
							<li class="nav-item">
								<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">打折工具</a>
							</li>
							<li class="nav-item">
								<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">抓取关键词</a>
							</li>
						</ul>
						<form role="tabpanel" class="tab-pane" id="goodspublish" onsubmit="onAddSubmit">
							<div class="form-group input-group-sm d-flex">
								<label for="modelSelect" class="col-form-label">模板：</label>
								<select class="form-control form-control-sm" id="modelSelect">
									<option>无</option>
								</select>
							</div>
							<div class="form-group input-group-sm d-flex">
								<label for="modelSelect" class="col-form-label">品牌：</label>
								<select class="form-control form-control-sm" id="modelSelect" name="brand">
									<option>无</option>
								</select>
							</div>
							<div class="form-group input-group-sm d-flex">
								<label for="modelSelect" class="col-form-label">适牌：</label>
								<select class="form-control form-control-sm" id="modelSelect" name="brand2">
									<option value="OPPO">OPPO</option>
									<option value="vivo">vivo</option>
									<option value="Huawei/华为">Huawei/华为</option>
									<option value="Honor/荣耀">Honor/荣耀</option>
									<option value="Xiaomi/小米">Xiaomi/小米</option>
									<option value="Apple/苹果">Apple/苹果</option>
								</select>
							</div>
							<div class="form-group input-group-sm d-flex">
								<label for="modelSelect" class="col-form-label">型号：</label>
								<div class="rb-input-multivalue" id="modelInput">
									<div class="items-wrapper">
										<input id="addModelInput" placeholder="输入型号回车" />
									</div>
								</div>
							</div>
							<div class="form-group input-group-sm d-flex">
								<label for="modelSelect" class="col-form-label">质地：</label>
								<select class="form-control form-control-sm" id="modelSelect" name="material">
									<option value="蚕丝">蚕丝</option>
									<option value="塑料">塑料</option>
									<option value="亚克力">亚克力</option>
									<option value="TPU">TPU</option>
									<option value="软胶">软胶</option>
									<option value="塑料">塑料</option>
									<option value="钢化玻璃">钢化玻璃</option>
									<option value="液态硅胶">液态硅胶</option>
									<option value="牛仔布">牛仔布</option>
									<option value="金属">金属</option>
									<option value="毛线">毛线</option>
									<option value="仿皮">仿皮</option>
									<option value="铝合金">铝合金</option>
									<option value="树脂">树脂</option>
									<option value="毛绒">毛绒</option>
									<option value="木">木</option>
									<option value="毛毡">毛毡</option>
									<option value="绒布">绒布</option>
									<option value="尼龙">尼龙</option>
									<option value="碳钎维">碳钎维</option>
								</select>
							</div>
							<div class="form-group input-group-sm d-flex">
								<label for="modelSelect" class="col-form-label">款式：</label>
								<select class="form-control form-control-sm" id="modelSelect" name="style">
									<option value="全包式">全包式</option>
									<option value="钱包式">钱包式</option>
									<option value="翻盖式">翻盖式</option>
									<option value="边框式">边框式</option>
									<option value="臂带式">臂带式</option>
									<option value="防水袋">防水袋</option>
								</select>
							</div>
							<div class="form-group input-group-sm d-flex">
								<label for="modelSelect" class="col-form-label">元素：</label>
								<div class="rb-input-multivalue" id="popularElesInput">
									<div class="items-wrapper">
										<input id="addEleInput" placeholder="输入元素回车" />
									</div>
								</div>
							</div>
							<div class="form-group input-group-sm d-flex">
								<label for="modelSelect" class="col-form-label">风格：</label>
								<select class="form-control form-control-sm" id="modelSelect" name="style2">
									<option value="简约">简约</option>
									<option value="卡通">卡通</option>
									<option value="日韩">日韩</option>
									<option value="欧美">欧美</option>
									<option value="中国风">中国风</option>
									<option value="商务">商务</option>
									<option value="小清新">小清新</option>
									<option value="复古">复古</option>
									<option value="民族风">民族风</option>
									<option value="运动">运动</option>
									<option value="个性定制/DIY">个性定制/DIY</option>
								</select>
							</div>
							<div class="form-group input-group-sm d-flex">
								<label for="modelSelect" class="col-form-label">市价：</label>
								<input class="form-control" placeholder="市场价" name="marketprice" />
							</div>
						</form>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-secondary btn-sm" id="savatToModel">保存为模板</button>
						<button type="button" class="btn btn-primary btn-sm" id="fillForm">一键填表</button>
					</div>
				</div>
			</div>
		</div>
		<script>
			$('#toolsModalToggle').click(function(){
				const target = $($(this).data('target'));
				if (target.hasClass('show')) target.removeClass('show');
				else target.addClass('show');
			})
			// 多值输入框添加值
			$('.rb-input-multivalue input').keypress(function(e){
				if (e.keyCode === 13) {
					const val = $(this).val().trim();
					if (val) $(\`<span class="item" data-val="\${val}">\${val}<span class="close">&times;</span></span>\`).insertBefore($(this));
					$(this).val('');
					return false;
				}
			})
			// 多值输入框删除值
			$('.rb-input-multivalue').on('click', '.close', function(){
				$(this).parent().remove();
			})
			function onAddSubmit(){
				return false;
			}
			$('#savatToModel').click(function(){
				let form = new FormData(document.querySelector('#goodspublish'));
				let data = {};
				for (let k of form.keys()) {
					let val = form.get(k)
					data[k] = val === '无' || !val ? null : val;
				}
				let models = [];
				for (let m of $('#modelInput .item')) {
					models.push($(m).data('val'))
				}
				data.models = models;
				let popularEles = [];
				for (let m of $('#popularElesInput .item')) {
					popularEles.push($(m).data('val'))
				}
				data.popularEles = popularEles;
				localStorage.setItem('goodsPublishForm', JSON.stringify(data));
			})
			$('#fillForm').click(function(){
				let data = localStorage.getItem('goodsPublishForm');
				if (data) data = JSON.parse(data);
				else data = {};
				if (data.models) {
					let title = $('#goods_name');
					title.val(data.models.join(''));
					title.trigger('input');
				}
			})
		</script>
	`;
	$('body').append($(settingHTML));
})()